<template>
	<el-container>
		<el-header>
			<el-button type="primary" @click="add_bt">添加</el-button>
		</el-header>
		<el-main>
			<el-table :data="list" >
				<el-table-column label="ID" prop="id">
				</el-table-column>
				
				<el-table-column label="封面" >
					<template slot-scope="scope">
						<el-image
						      style="width: 50px; height: 50px"
						      :src="$get_img+scope.row.icon"></el-image>
					</template>
				</el-table-column>
				
				<el-table-column label="名称" prop="name">
				</el-table-column>
				
				<el-table-column label="广告图" width="200px" >
					<template slot-scope="scope">
						<el-image
						  v-for="(item,index) in scope.row.banners" :key="index"
						      style="width: 50px; height: 50px;margin: 5px;"
						      :src="$get_img+item"></el-image>
					</template>
				</el-table-column>
				
				<el-table-column label="面积" prop="area">
				</el-table-column>
				
				<el-table-column label="标签" width="200">
					<template slot-scope="scope">
						<el-tag v-for="(item,index) in scope.row.label" :key="index" type="success">{{item}}</el-tag>
					</template>
				</el-table-column>
				
				<el-table-column label="价格" prop="price">
				</el-table-column>
				
				<el-table-column label="地址" prop="address" width="150">
				</el-table-column>
				
				<el-table-column align="right" width="150">
					<template slot-scope="scope">
						<el-button size="mini" @click="edit_bt(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="del(scope.row.id)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-main>
		<el-footer>
			<el-pagination
			  background
			  layout="prev, pager, next"
			  :page-size="search_form.num"
			  :total="total" @current-change="current_change">
			</el-pagination>
		</el-footer>
	</el-container>
</template>
<script>
	export default {
		data() {
			return {
				list: [],
				tableName:"houses",
				total: 0,
				search_form: {
					table: "",
					page: 1,
					num: 5,
					where: null,
					orderBy: "id",
					asdes: "asc"
				}
			}
		},
		mounted() {
			this.get_data()
		},
		methods: {
			get_data() {
				this.search_form.table=this.tableName
				const loading = this.$loading({
				         lock: true,
				         text: '加载中',
				         spinner: 'el-icon-loading',
				         background: 'rgba(0, 0, 0, 0.7)'
				       });
				
				this.$model.post("cms/table/get", this.search_form).then(res => {
					if (res.code == 200) {
						loading.close();
						this.list = res.data.data
						this.total = res.data.total
					}
				})
			},

			current_change(e){
				this.search_form.page=e
				this.get_data()
			},
		
			add_bt() {
					this.$router.push({ path: '/project/edit_house' })
			},
			edit_bt(row){
				let data=JSON.stringify(row)
				localStorage.setItem("edit",data)
				this.$router.push({ path: '/project/edit_house' })
			},
			del(id) {
				let url = "cms/table/del?table=houses&id=" + id
				this.$model.put(url).then(res => {
					if (res.code == 200) {
						this.$message({
							message: '已删除',
							type: 'success'
						});
						this.search_form.page = 1
						this.get_data()
					}
				})
			}
		}
	}
</script>
<style>
</style>
